<template>
  <div>
    <!-- 优惠券 -->
    <div class="coupon">
      <div class="topcou">
        <van-image class="img" src="/images/coupon/1.png" alt="" />
        <div class="info">
          <h2>40-5元现金券（新店福利）</h2>
          <p>有效期：2022-02-19 至 2022-03-19</p>
        </div>
      </div>
      <div class="midcou"></div>
      <div class="botcou">
        <p>使用时段：00:00:00-23:59:59</p>
        <button class="btn">立即使用</button>
      </div>
    </div>
    <div class="coupon">
      <div class="topcou">
        <van-image class="img" src="/images/coupon/2.png" alt="" />
        <div class="info">
          <h2>新人尝鲜券</h2>
          <p>有效期：2022-02-12 至 2022-03-13</p>
        </div>
      </div>
      <div class="midcou"></div>
      <div class="botcou">
        <p>使用时段：00:00:00-23:59:59</p>
        <button class="btn">立即使用</button>
      </div>
    </div>
    <div class="coupon">
      <div class="topcou">
        <van-image class="img" src="/images/coupon/2.png" alt="" />
        <div class="info">
          <h2>新人外卖券</h2>
          <p>有效期：2022-02-12 至 2022-03-13</p>
        </div>
      </div>
      <div class="midcou"></div>
      <div class="botcou">
        <p>使用时段：00:00:00-23:59:59</p>
        <button class="btn">立即使用</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.coupon {
  width: 92vw;
  margin: 4vw auto 6vw;
  background-color: #fff;
  border-radius: 1vw;
  box-shadow: 0 0 3px 2px #d3d3d4;
}
.coupon .topcou {
  padding: 3vw 5vw;
  display: flex;
  align-items: center;
  text-align: left;
}
.coupon .topcou .img {
  width: 15vw;
}
.coupon .topcou .info {
  margin-left: 4vw;
}
.tabs .coupon .topcou .info p {
  display: block;
  margin-top: 2vw;
  font-size: 3vw;
}
.coupon .midcou {
  border-top: 1px dashed #e2e5e7;
  position: relative;
}
.coupon .midcou::before,
.coupon .midcou::after {
  content: "";
  display: block;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  background-color: #f3f4f5;
  position: absolute;
}
.coupon .midcou::before {
  left: -2vw;
  bottom: -2vw;
}
.coupon .midcou::after {
  right: -2vw;
  bottom: -2vw;
}
.coupon .botcou {
  display: flex;
  justify-content: space-between;
  padding: 2vw 5vw;
  font-size: 3vw;
}
.coupon .botcou p {
  display: block;
  margin: 2vw;
}
.coupon .botcou .btn {
  border: none;
  color: #a7d500;
  background-color: #fff;
}
</style>
